<template>
  <div class="container">
    <div class="left-tree">
      <!-- 关键：保留node-key，确保选中逻辑生效 -->
      <el-tree
        :data="treeData"
        :props="treeProps"
        node-key="id"
        ref="treeRef"
        @node-click="handleTreeClick"
        :default-selected-keys="[defaultSelectedId]"
        :default-expanded-keys="[defaultExpandedId]"
        highlight-current
        style="width: 100%"
      ></el-tree>
    </div>
    <div class="right-content">
      <!-- 右侧表单和表格内容不变 -->
      <el-form :model="queryParams" :inline="true" class="query-form">
        <el-form-item label="时间段：">
          <el-date-picker
            v-model="queryParams.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="水质状况：">
          <el-select
            v-model="queryParams.waterQuality"
            placeholder="请选择水质状况"
          >
            <el-option label="水质正常" value="水质正常"></el-option>
            <el-option label="水质异常" value="水质异常"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="handleReset"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-download"
            @click="handleExport"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="monitorTime" label="监测时间"></el-table-column>
        <el-table-column prop="waterQuality" label="水质状况"></el-table-column>
        <el-table-column
          prop="backgroundWater"
          label="背景水"
        ></el-table-column>
        <el-table-column prop="currentWater" label="当前水"></el-table-column>
        <el-table-column prop="peakDiff" label="峰值差异"></el-table-column>
        <el-table-column prop="exDiff" label="Ex差异"></el-table-column>
        <el-table-column prop="emDiff" label="Em差异"></el-table-column>
        <el-table-column
          prop="compareResult"
          label="对比结果"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="viewChart(scope.row)"
              >查看图表</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ECharts图表弹框 -->
    <el-dialog
      :title="chartTitle"
      :visible.sync="chartDialogVisible"
      width="800px"
    >
      <div ref="chartContainer" style="width: 100%; height: 400px"></div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chartDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getTreeSelect, getMonitorDataPage } from "@/api/traceability";

export default {
  name: "WaterSourceTracing",
  data() {
    return {
      treeData: [], // 转换后的树形结构
      // 关键：Tree配置，label映射接口返回的"name"字段
      treeProps: {
        children: "children",
        label: "name", // 接口返回的节点文本是"name"，不是"label"
      },
      queryParams: {
        timeRange: [],
        waterQuality: "",
        selectedTreeId: null, // 存储当前选中的节点ID
      },
      tableData: [
        {
          monitorTime: "2024-09-11 13:58:10",
          waterQuality: "水质正常",
          backgroundWater: "Ex:365,Em:428,H…",
          currentWater: "Ex:365,Em:428,H…",
          peakDiff: 156,
          exDiff: 168,
          emDiff: 145,
          compareResult: "",
        },
        {
          monitorTime: "2024-09-11 00:00:00",
          waterQuality: "水质正常",
          backgroundWater: "Ex:355,Em:450,H…",
          currentWater: "Ex:365,Em:428,H…",
          peakDiff: 124,
          exDiff: 110,
          emDiff: 98,
          compareResult: "",
        },
      ],
      chartDialogVisible: false,
      chartTitle: "数据对比图表",
      myChart: null,
      defaultSelectedId: null, // 默认选中的节点ID（目标：考雨桐）
      defaultExpandedId: null, // 默认展开的父节点ID（目标：河道溯源）
    };
  },
  mounted() {
    this.getTreeSelect(); // 优先加载树形数据
  },
  methods: {
    // 1. 获取接口扁平数据，转换为树形并计算默认选中
    getTreeSelect() {
      getTreeSelect()
        .then((response) => {
          const flatData = response.data || [];
          console.log("接口返回的扁平数据：", flatData);

          // 步骤1：扁平数据转树形结构（确保子节点顺序正确）
          this.treeData = this.buildTree(flatData);
          console.log("转换后的树形结构：", this.treeData);

          // 步骤2：计算默认选中节点（第一级根节点的最后一个子节点）
          this.calcDefaultSelected();
          console.log("默认选中节点ID：", this.defaultSelectedId);

          // 步骤3：手动触发选中（确保高亮生效）
          this.$nextTick(() => {
            if (this.defaultSelectedId && this.$refs.treeRef) {
              this.$refs.treeRef.setCurrentKey(this.defaultSelectedId); // 强制选中
              this.queryParams.selectedTreeId = this.defaultSelectedId; // 同步查询参数
              this.handleQuery(); // 触发数据查询
            }
          });
        })
        .catch((err) => {
          console.error("获取树形数据失败：", err);
        });
    },

    /**
     * 2. 核心方法：扁平数据转树形结构（保留子节点原始顺序）
     * @param {Array} flatData - 接口返回的扁平数组（pid关联父级）
     * @returns {Array} 树形结构数组
     */
    buildTree(flatData) {
      const nodeMap = {}; // 存储所有节点的映射（id -> 节点）
      const rootNodes = []; // 最终的根节点数组（pid=0）

      // 第一步：遍历所有节点，初始化并加入映射表
      flatData.forEach((node) => {
        // 为每个节点添加children数组（避免无children时显示异常）
        nodeMap[node.id] = { ...node, children: [] };
      });

      // 第二步：根据pid关联父节点和子节点
      flatData.forEach((node) => {
        const currentNode = nodeMap[node.id];
        const parentId = node.pid;

        if (parentId === "0") {
          // pid=0：根节点，直接加入根数组
          rootNodes.push(currentNode);
        } else {
          // 非根节点：找到父节点，加入父节点的children
          const parentNode = nodeMap[parentId];
          if (parentNode) {
            // 防止父节点不存在的异常
            parentNode.children.push(currentNode);
          }
        }
      });

      return rootNodes;
    },

    /**
     * 3. 核心方法：计算默认选中节点
     * 规则：选中第一级根节点的最后一个子节点；若根节点无子节点，选中根节点本身
     */
    calcDefaultSelected() {
      if (this.treeData.length === 0) return;

      // 第一步：获取第一级根节点（示例中是"河道溯源"，id=1）
      const firstRootNode = this.treeData[0];
      console.log("第一级根节点：", firstRootNode);

      // 第二步：判断根节点是否有子节点
      if (firstRootNode.children && firstRootNode.children.length > 0) {
        // 有子节点：选中最后一个子节点（示例中是"考雨桐"，id=2276554enim）
        const lastChildNode =
          firstRootNode.children[firstRootNode.children.length - 1];
        this.defaultSelectedId = lastChildNode.id;
        this.defaultExpandedId = firstRootNode.id; // 展开父节点，让子节点可见
      } else {
        // 无子节点：直接选中第一级根节点
        this.defaultSelectedId = firstRootNode.id;
        this.defaultExpandedId = firstRootNode.id;
      }
    },

    // 4. 树形节点点击事件（同步选中状态和查询参数）
    handleTreeClick(data) {
      this.queryParams.selectedTreeId = data.id;
      this.handleQuery(); // 点击节点后触发查询
    },

    // 5. 查询表格数据（实际项目替换为真实接口）
    handleQuery() {
      console.log("当前查询参数：", this.queryParams);
      // 示例：调用接口获取表格数据
      getMonitorDataPage(this.queryParams)
        .then((response) => {
          this.tableData = response.data || [];
        })
        .catch((err) => {
          console.error("查询表格数据失败：", err);
          this.$message.error("数据加载失败，请重试");
        });
    },

    // 6. 重置功能（恢复默认选中状态）
    handleReset() {
      this.queryParams.timeRange = [];
      this.queryParams.waterQuality = "";
      // 重置为默认选中节点
      if (this.defaultSelectedId && this.$refs.treeRef) {
        this.$refs.treeRef.setCurrentKey(this.defaultSelectedId);
        this.queryParams.selectedTreeId = this.defaultSelectedId;
        this.handleQuery();
      }
    },

    // 7. 导出功能（待实现）
    handleExport() {
      this.$message.info("导出功能待实现");
    },

    // 8. 查看图表（不变）
    viewChart(row) {
      this.chartDialogVisible = true;
      this.$nextTick(() => {
        this.initChart(row);
      });
    },

    // 9. 初始化ECharts图表（不变）
    initChart(row) {
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = echarts.init(this.$refs.chartContainer);
      const option = {
        title: { text: "数据对比" },
        tooltip: { trigger: "axis" },
        legend: { data: ["峰值差异", "Ex差异", "Em差异"] },
        xAxis: { type: "category", data: ["当前值", "参考值"] },
        yAxis: { type: "value" },
        series: [
          { name: "峰值差异", data: [row.peakDiff, 0], type: "bar" },
          { name: "Ex差异", data: [row.exDiff, 0], type: "bar" },
          { name: "Em差异", data: [row.emDiff, 0], type: "bar" },
        ],
      };
      this.myChart.setOption(option);
    },
  },
  // 组件销毁前释放ECharts实例
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
      this.myChart = null;
    }
  },
};
</script>

<style scoped>
.container {
  display: flex;
  height: calc(100vh - 20px);
}

.left-tree {
  width: 200px;
  border-right: 1px solid #e6e6e6;
  padding: 10px;
}

.right-content {
  flex: 1;
  padding: 10px;
}

.query-form {
  margin-bottom: 10px;
}

/* 可选：自定义选中节点的高亮颜色（默认是Element的蓝色，可微调） */
::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #409eff !important; /* 确保选中字体是蓝色 */
  font-weight: 500; /* 可选：加粗选中节点 */
}
</style>
